<template>
  <div class="planbox">
    <div class="topbox">
      <el-form ref="form" label-position="left" label-width="80px">
          <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="用电企业">
                  <FilterSelect 
                      ref="yonghu" 
                      :optionlist="yonghulist" 
                      :valuekey="{name:'name',value:'id'}"
                      :defaultvalue="companyId"
                      @changeselect="changeqiye"
                      ></FilterSelect>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="月份">
                  <el-date-picker style="width: 100%;"  v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="">
                  <el-radio-group v-model="radio">
                    <el-radio label="1">企业指标</el-radio>
                    <el-radio label="2">行业指标</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8" style="text-align: right;">
                <el-form-item label="">
                  <el-button size="small" class="chongzhi" @click="chongzhi">重 置</el-button>
                  <el-button type="primary" size="small" @click="getdatalist">查 询</el-button>
                </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      <!-- <div>
        <span class="spans">用电企业</span>
          <span class="spans">
            <el-select v-model="companyId" placeholder="请选择用电单位"  size="small" style="width: 200px;" @change="changeqiye">
              <el-option v-for="(item,index) in yonghulist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
            </el-select>
          </span>
          <span class="spans">月份</span>
          <span class="spans">
            <el-date-picker  v-model="value2" type="month" value-format="yyyy-MM" placeholder="选择月" size="small"></el-date-picker>
          </span>
          <span class="spans">
            <el-radio-group v-model="radio">
              <el-radio label="1">企业指标</el-radio>
              <el-radio label="2">行业指标</el-radio>
            </el-radio-group>
          </span>
      </div>
      <div>
          <el-button size="small" class="chongzhi" @click="chongzhi">重 置</el-button>
          <el-button type="primary" size="small" @click="getdatalist">查 询</el-button>
        </div> -->
    </div>
    <div class="bodybox">
       <!-- 导出部分 -->
       <div class="top">
        <div>用能计划管理</div>
        <div class="butti">
          <TopTile @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile>
        </div>
      </div>
      <!-- table表格 -->
      <div class="table">
        <TableColumn
        ref="tabledata"
        :tableData="tableData" 
        :tableConfig="tableConfig" 
        :issize="issize">
        </TableColumn>
      </div>
    </div>
  </div>
</template>

<script>
import FilterSelect from '@/components/FilterSelect'
import { getyongdianlistapi } from '@/api/energy-consumption/Basic-information/medium'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import {getjiahualistapi} from '@/api/energy-consumption/factory-energy/ProductionIndicators'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn,
    FilterSelect
  },
  data() {
    return {
      radio:'1',
      value2:'',
      companyId: '',
      issize:'medium',
      yonghulist: [],
      tableData: [],
      tableConfig: [
        { label: '序号', type: 'index', width: '70', center: 'center' },
        {label:'企业名称',prop:'companyName' ,width:'250'},
        {label:'日期',prop:'produceDate',center: 'center' },
        {label:'产品',prop:'productName' },
        {label:'产品单位',prop:'productUnit' },
        {label:'计划产量',prop:'planValue',center: 'right' },
        {label:'单位产品能耗',prop:'perProductValue',center: 'right' },
        {label:'计划用能(kWh)',prop:'planEnergyValue',center: 'right' },
        {label:'计划用能费用(元)',prop:'planCostValue',center: 'right' },
        {label:'实际用能(kWh)', prop: 'actualValue', center: 'right' },
        {label:'实际用能费用(元)',prop:'actualCostValue',center: 'right' },
      ],
    };
  },

  async mounted() {
    this.gettime()
    // 获取用电单位
    const { data: { list } } = await getyongdianlistapi()
    const companyId = localStorage.getItem('companyId')
    this.yonghulist = list
    this.$set(this,'companyId',companyId?+companyId:list[0].id)
    this.getdatalist()
  },

  methods: {
    changeqiye(val) {
      this.$set(this,'companyId',val)
      localStorage.setItem('companyId', val)
    },
    // 获取表格数据
    async getdatalist() {
      this.$refs.tabledata.loading=true
      const companyName=this.yonghulist.filter(ele=>ele.id==this.companyId)[0].name
      const {data:{list}}=await getjiahualistapi({
        companyId:this.companyId,dateString:this.value2,index:this.radio,companyName
      })
      this.tableData=list
      this.$refs.tabledata.loading=false
    },
       // 调节表格密度
  command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      const companyName=this.yonghulist.filter(ele=>ele.id==this.companyId)[0].name
      exportexcel('ecm-microservice-biz/ecm/factory/energy/plan/data/comparison/exportExcel',{
        companyId:this.companyId,dateString:this.value2,index:this.radio,companyName},'用能计划管理')
    },
    // 刷新列表
    shuaxin() {
      this.getdatalist()
      this.$message.success('列表刷新成功')
    },
    chongzhi(){
      this.radio='1'
      this.$set(this,'companyId',this.yonghulist[0].id)
      this.gettime()
      this.getdatalist()
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month =mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.$set(this,'value2',year + '-' + month)
    },
  },
};
</script>

<style scoped>
.planbox{
  height: 100%;
  padding: 10px;
  .topbox{
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .bodybox{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .top{
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butti{
        display: flex;
        align-items: center;
      }
    }
    .table{
      height: 94%;
    }
  }
}
</style>